<template>
	<nav>
		<ul>
			<li @click="switchSide"><i class="iconfont icon-caidan"></i></li>
			<li>卖座电影</li>
			<li @click="showLogin"><i class="iconfont icon-rentou"></i></li>
		</ul>
	</nav>
</template>

<script>
	import "../scss/iconfont.css";
	export default{
		name:"myNav",
		data(){
			return{
			}
		},
		methods:{
			showLogin(){
				this.$router.push("/login")
			},
			switchSide(){
				this.$store.commit("switchSide") 
			}
		}
	}
</script>

<style lang="scss">
 nav{
 	ul{
 		width: 100%;
 		height: 50px;
 		background: #282828;
 		line-height: 50px;
 		li{
 			display: inline-block;
 			height: 100%;
 			vertical-align: middle;
 			color: white;
 			i.iconfont{
 				font-size: 24px;
 			}
 		}
 		li:first-child{
 			width: 50px;
 			text-align: center;
 			border-right:2px solid white ;
 			color: gray;
 		}
 		li:nth-of-type(2){
 			padding-left:15px ;
 			box-sizing: border-box;
 			font-size: 20px;
 			width: calc(100% - 100px);
 		}
 	}
 }
</style>